<template>
    <div class="realTime">
        <div class="boxTitle">
            <img src="@/assets/images/home/rulu.png" alt="">
            <span class="title">实时监测</span>
        </div>
        <div class="l_top">
            <div class="l_top_1">
                <div class="l_top_num">35</div>
                <div class="l_top_img"></div>
                <span>主汽流量(t/h)</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">46.6</div>
                <div class="l_top_img"></div>
                <span>主汽温度(℃)</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">41.8</div>
                <div class="l_top_img"></div>
                <span>主汽压力(Mpa)</span>
            </div>
        </div>
        <div class="l_top">
            <div class="l_top_1">
                <div class="l_top_num">35</div>
                <div class="l_top_img"></div>
                <span>主汽流量(t/h)</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">46.6</div>
                <div class="l_top_img"></div>
                <span>主汽温度(℃)</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">41.8</div>
                <div class="l_top_img"></div>
                <span>主汽压力(Mpa)</span>
            </div>
        </div>
        <div class="l_top">
            <div class="l_top_1">
                <div class="l_top_num">35</div>
                <div class="l_top_img"></div>
                <span>主汽流量(t/h)</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">46.6</div>
                <div class="l_top_img"></div>
                <span>主汽温度(℃)</span>
            </div>
            <div class="l_top_1">
                <div class="l_top_num">41.8</div>
                <div class="l_top_img"></div>
                <span>主汽压力(Mpa)</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style lang="scss" scoped>
.realTime {
    position: absolute;
    background: url(@/assets/images/home/left2.png) no-repeat;
    background-size: 100% 100%;
    top: vh(61);
    right: vh(21);
    width: vh(421);
    height: vh(302);
    z-index: 999;
    padding-left: vh(27);
    padding-right: vh(26);
    .l_top {
			display: flex;
			margin-top: vh(20);
			// padding-left: vh(14);
			// padding-right: vh(14);
			justify-content: space-between;

			.l_top_1 {
				display: flex;
				flex-direction: column;
				align-items: center;

				.l_top_num {
					line-height: vh(15);
					font-size: vh(20);
					font-family: DIN;
					font-weight: bold;
					color: #00E3FF;
				}

				.l_top_img {
					text-align: center;
					width: vh(88);
					height: vh(22);
					background: url(@/assets/images/home/zu1.png) no-repeat;
					background-size: 100% 100%;
					margin-bottom: vh(11);
				}

				span {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: vh(12);
					color: #FFFFFF;
				}
			}
		}
}
</style>
